<template>
    <div>
        <!-- 选择日期 -->
        <!-- <div class="to_query">
            <div :class="{'query_item':query_item, 'active':index==5}" @click="changeIndex(5)">按日</div>
            <div :class="{'query_item':query_item, 'active':index==6}" @click="changeIndex(6)">按周</div>
            <div :class="{'query_item':query_item, 'active':index==7}" @click="changeIndex(7)">按月</div>
            <div class="query_right" @click="toQuery">
                <div class="query_date">
                    {{datetime}}<text v-if="datetime==today">(今天)</text>
                </div>

                <div class="query-date_icon">
                    <image src="../../static/date-icon.png" class="date_icon"></image>
                </div>
            </div>
        </div> -->
        <div class="to_query">
            <div :class="{'query_item':query_item, 'active':index==1}"  @click="toQuery(1)">今日</div>
            <div :class="{'query_item':query_item, 'active':index==2}"  @click="toQuery(2)">昨日</div>
            <div :class="{'query_item':query_item, 'active':index==3}"  @click="toQuery(3)">本周</div>
            <div :class="{'query_item':query_item, 'active':index==4}"  @click="toQuery(4)">本月</div>
        </div>

        <!--  统计 -->
        <div class="total_box">
            <div class="total_box_left">
                <text class="text"> 总收入(元)</text>
                <text style="color: red;font-size: 37rpx;font-weight: 600;"> +{{total_amount}}</text>
            </div>
            <div class="total_box_center">
                <text class="text"> 手续费(元)</text>
                <text style="color:#333;font-size: 37rpx;font-weight: 600;"> -{{total_fee}}</text>
            </div>
            <div class="total_box_right">
                <text class="text"> 总减免(元)</text>
                <text style="color:#333;font-size: 37rpx;font-weight: 600;"> -{{total_jianmian}}</text>
            </div>
        </div>
        <div class="list">
            <div class="item" v-for="(order,bindex) in orderinfo">
                <image :src="order.avatar" mode="aspectFit" />
                <div class="info">
                    <div>{{order.nickname}}</div>{{order.add_time}}
                </div>
                <div>
                    <div>{{order.real_amount}}</div>
                    <div class="jianmian">
                        <div v-if="order.reduction_amount>0">-{{order.reduction_amount }}</div>
                        <div style="height: 10rpx;" v-else> </div>
                    </div>
                    <div style="color:#0e9d07;font-size: 22rpx;" v-if="(order.sub_order.length==0) || (order.real_amount==order.amount_paid)">已付款</div>
                    <div style="color:#575757;font-size: 22rpx;" v-else>已付￥{{order.amount_paid}}元</div>
                </div>
                <div class="more" v-if="order.sub_order.length>0">
                    <div v-for="(sub_order,sindex) in order.sub_order">
                        <div v-if="sub_order.status==1">{{sub_order.add_time}}</div>
                        <div v-else>待支付...</div>
                        <text>￥{{sub_order.real_amount}}</text>
                    </div>
                </div>
            </div>
            <!-- <uni-pagination @change="handlePage" show-icon="true" :total="total" :current="page" :pageSize="count"></uni-pagination> -->
        </div>

        <div class="footer" v-if="orderinfo.length==0">
            —— 所选时间暂无账单 ——
        </div>
        <div v-else>
            <div class="footer" v-if="!hasMore">
                —— 以上是全部账单记录 ——
            </div>
            <div class="footer" v-else>
                下拉加载更多
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                merchant_id: '',
                orderinfo: [],
                page: 1,
                hasMore: 1,
                total: 0,
                datetime: '',
                today: '',
                index: 1,
                query_item: true,
                total_amount:0.00,
                total_fee:0.00,
                total_jianmian:0.00
            }
        },
        onLoad(query) {
            this.merchant_id = uni.getStorageSync('merchant_id');
            this.getOrderList();

            /* 获取今天的日期 */
            var date = new Date();
            var today = (date.getMonth() + 1) + "月" + date.getDate() + "日";
            this.today = today;

            //判断是否有日期
            if (query.datetime) {
                this.datetime = datetime;
            } else {
                this.datetime = today;
            }

        },
        methods: {
            //开启上拉刷新
            getOrderList: function() {
                var that = this;
                uni.request({
                    url: this.$Url + '/index.php/api/zhushou/getOrderList',
                    method: 'POST',
                    data: {
                        page: that.page,
                        merchant_id: that.merchant_id,
                        //datetime: that.datetime,
                        index:that.index
                    },
                    dataType: 'json',
                    success: function(res) {
                        if (res.data.status) {
                            var orderinfo = that.page == 1 ? res.data.order : that.orderinfo.concat(res.data.order);
                            that.orderinfo = orderinfo;
                            that.hasMore = res.data.hasMore;
                            if(that.page==1){
                                that.total_amount = res.data.statistics.total_amount;
                                that.total_fee = res.data.statistics.total_fee;
                                that.total_jianmian = res.data.statistics.total_jianmian;
                            }
                        } else {
                            uni.showToast({
                                title: res.data.msg,
                                duration: 2000,
                                icon: 'none'
                            });

                        }

                        uni.stopPullDownRefresh();
                    },
                    fail: function(res) {
                        uni.showToast({
                            title: '网络错误',
                            duration: 2000,
                            icon: 'none'
                        });

                        uni.stopPullDownRefresh();
                    },
                    complete: function(res) {
                        uni.hideLoading();
                    }
                });
            },

            onShow: function() {
                //var pages = getCurrentPages();
                //console.log('pages', pages);
            },

            //选择日期类型切换
            changeIndex: function(index) {
                this.index = index;
            },

            //选择日期
            toQuery: function(index) {
                /* if (this.index == 5) {
                    uni.navigateTo({
                        url: '/pages/dateDay/dateDay'
                    })
                } */
                if(this.index != index){
                    this.index = index;
                    this.page = 1;
                    this.hasMore = 1;
                    this.getOrderList();
                }
            },

        },
        onReachBottom() {
            var that = this;
            if (that.hasMore) {
                that.page = that.page + 1;
                that.getOrderList();
            }
        },
        onPullDownRefresh() {
            this.page = 1;
            this.hasMore = 1;
            this.getOrderList();
        },
    }
</script>

<style>
    page {
        background: #118eea;
        font-family: '微软雅黑';
        padding-top: 30rpx;
        box-sizing: border-box;
    }

    /* 选择查询日期 */
    .to_query {
        width: 100%;
        height: 80rpx;
        display: flex;
        align-items: center;
        padding-left: 30rpx;
        margin: 0 auto;
        color: #F2F2F2;
        background: #118eea;
        box-sizing: border-box;
        z-index: 1;
        font-size: 35rpx;
    }

    .to_query>image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
    }

    .to_query .query_item {
        width: 70rpx;
        /* padding-bottom: 10rpx; */
        margin-right: 55rpx;
        border-bottom: solid 4rpx #118eea;
        text-align: center;
        height: 60rpx;
        line-height: 60rpx;
    }

    .to_query .query_item.active {
        border-bottom: solid 4rpx #FFFFFF;
    }

    .query_right {
        width: 310rpx;
        background: #259deb;
        height: 75rpx;
        line-height: 75rpx;
    }

    .query_right .query_date {
        float: left;
        width: 230rpx;
        text-align: center;
        font-size: 28rpx;
    }

    .query-date_icon {
        width: 75rpx;
        height: 75rpx;
        border-left: solid 1rpx #3eafff;
        float: right;
    }

    .query_right .date_icon {
        width: 33rpx;
        height: 33rpx;
        padding: 20rpx;
    }

    /* 统计查询 */
    .total_box {
        width: 690rpx;
        height: 150rpx;
        border-radius: 14rpx;
        background: #fff;
        margin: 0 auto;
        overflow: hidden;
        margin-top: 25rpx;
        display: block;
    }

    .total_box .total_box_left {
        float: left;
        padding: 30rpx 30rpx 20rpx;
    }

    .total_box .total_box_left .text {
        display: block;
        padding-bottom: 15rpx;
        font-size: 30rpx;
    }

    .total_box .total_box_center {
        padding-top: 30rpx;
        margin-left: 70rpx;
        float: left;
    }

    .total_box .total_box_center .text {
        display: block;
        padding-bottom: 15rpx;
        font-size: 30rpx;
    }

    .total_box .total_box_right {
        padding: 30rpx 30rpx 20rpx;
        /* margin-left: 470rpx; */
        float: right;
    }

    .total_box .total_box_right .text {
        display: block;
        padding-bottom: 15rpx;
        font-size: 30rpx;
    }

    /* 账单列表 */
    .list {
        width: 690rpx;
        height: auto;
        border-radius: 14rpx;
        background: #fff;
        margin: 0 auto;
        overflow: hidden;
        margin-top: 25rpx;
    }

    .item {
        width: 100%;
        height: auto;
        border-bottom: 2rpx solid #f2f2f2;
        padding: 20rpx 30rpx;
        box-sizing: border-box;
    }

    .item:after {
        content: '';
        display: block;
        clear: both;
    }

    .item>image {
        width: 86rpx;
        height: 86rpx;
        border-radius: 50%;
        float: left;
        background-color: #f2f2f2;
        margin-top: 15rpx;
    }

    .item .info {
        float: left;
        margin: 10rpx 19rpx;
        font-size: 26rpx;
        color: #666;
        height: 90rpx;
        line-height: 50rpx;
    }

    .item .info>div {
        font-size: 32rpx;
        color: #333;
    }

    /* shanchu */
    .item>div:nth-child(3) {
        font-size: 24rpx;
        float: right;
        margin-top: 5rpx;
        text-align: right;
    }

    .item>div:nth-child(3)>div {
        font-size: 36rpx;
        /* color: #118eea; */
        color: #333;
    }
    .item>div:nth-child(3)>div.jianmian{
        font-size: 28rpx;
        color: red;
    }

    /* ======================end===============================*/
    .item .rightmoney {
        font-size: 24rpx;
        float: right;
        margin-top: 10rpx;
        text-align: right;
    }

    .item .rightmoney>div {
        font-size: 36rpx;
        color: #118eea;
    }

    .more {
        padding: 20rpx 0rpx 20rpx 104rpx;
        box-sizing: border-box;
        width: 100%;
        float: left;
        color: #161616;
        font-size: 13px;
    }

    .more>div {
        display: flex;
        justify-content: space-between;
        margin: 20rpx 0;
    }

    .more>div text:nth-child(2) {
        color: #118eea;
    }

    .footer {
        text-align: center;
        color: #fff;
        margin: 20rpx auto;
        font-size: 28rpx;
        margin-top: 50rpx;
        margin-bottom: 50rpx;
    }
</style>
